<!DOCTYPE html>
<html>

<head>
  <!-- 标题及搜索关键字 -->

  <link rel="shortcut icon" type="image/x-icon" href="img/favicon/favicon.ico" />
  <title>普通UI控件 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

  <!--第三方lib-->
  <script type="text/javascript" src="/lib/include-lib.js" libpath="/lib/"
    include="jquery,layer,toastr,font-awesome,ztree,jquery.minicolors,jedate,bootstrap,bootstrap-table,bootstrap-checkbox,bootstrap-slider,layer,haoutil,toastr,mars2d,font-awesome,localforage"></script>

  <link href="/css/style.css" rel="stylesheet" />
  <style>
    .fixed-table-container tbody .selected td {
      background-color: #3f4854a9 !important;
    }
  </style>
</head>

<body>
  <div id="mars2dContainer" class="mars2d-container"></div>

  <!-- 面板 -->
  <div class="infoview" style="overflow: auto; max-height: 850px">
    <table class="mars-table" style="border-collapse:separate; border-spacing:0px 6px;">
      <tbody>
        <tr>
          <td>简单文本：</td>
          <td>
            <input id="txtUrl" type="text" value="" required class="form-control" placeholder="请输入" />
          </td>
        </tr>

        <tr>
          <td>下拉框：</td>
          <td>
            <select id="txtCrs" class="selectpicker form-control">
              <option value="" selected="selected">默认</option>
              <option value="EPSG:3857">火星</option>
              <option value="EPSG:4326">地球</option>
              <option value="EPSG:4490">太阳</option>
            </select>
          </td>
        </tr>

        <tr>
          <td class="nametd">日期：</td>
          <td>
            <input type="text" class="form-control" id="txtStartTime" placeholder="YYYY-MM-DD" />
          </td>
        </tr>

        <tr>
          <td>进度条：</td>
          <td class="slider">
            <input id="slider_brightness" type="text" data-slider-min="-0.5" data-slider-max="1.5"
              data-slider-step="0.01" data-slider-value="-0.5" />
          </td>
        </tr>

        <tr>
          <td>刻度进度条：</td>
          <td class="slider">
            <input id="slider_showLevel" type="text" />
          </td>
        </tr>

        <tr>
          <td>地图交互：</td>
          <td>
            <input type="text" name="" id="txtRectangle" class="form-control" value="" style="width: 150px" readonly />
            <input id="btnStartDraw" type="button" class="btn btn-primary" value="绘制" onclick="onDrawExtent()" />
            <!-- <input id="btnStartClear" type="button" class="btn btn-primary" value="清除" onclick="onClearExtent()" /> -->
          </td>
        </tr>

        <tr>
          <td>多选：</td>
          <td class="slider">
            <div class="checkbox checkbox-primary checkbox-inline">
              <input id="showGoHome" class="styled" type="checkbox" onclick="fireStar()" />
              <label for="showGoHome"> 火星 </label>
            </div>

            <div class="checkbox checkbox-primary checkbox-inline">
              <input id="showSceneModePicker" class="styled" type="checkbox" onclick="earthStar()" />
              <label for="showSceneModePicker"> 地球 </label>
            </div>

            <div class="checkbox checkbox-primary checkbox-inline">
              <input id="showBaseLayerPicker" class="styled" type="checkbox" onclick="sunStar()" />
              <label for="showBaseLayerPicker"> 太阳 </label>
            </div>
          </td>
        </tr>

        <tr>
          <td>单选：</td>
          <td>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="shadingMaterials1" name="shadingMaterials" onclick="chooseStar()" checked />
              <label for="shadingMaterials1">火星</label>
            </div>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="shadingMaterials2" name="shadingMaterials" onclick="chooseStar()" />
              <label for="shadingMaterials2">地球</label>
            </div>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="shadingMaterials3" name="shadingMaterials" onclick="chooseStar()" />
              <label for="shadingMaterials3">太阳</label>
            </div>
          </td>
        </tr>
        <tr>
          <td>颜色：</td>
          <td colspan="2">
            <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#FF0000" />
          </td>
        </tr>

        <tr>
          <td>弹窗：</td>
          <td id="tdViewAdd" colspan="2" style="text-align: left">
            <input type="button" class="btn btn-primary" value="提示信息" onclick="messageOut()" />
            <input type="button" class="btn btn-primary" value="Notify弹窗" onclick="Warning()" />
            <input type="button" class="btn btn-primary" value="Alert弹窗" onclick="Alert()" />
          </td>
        </tr>

        <tr>
          <td>进度条：</td>
          <td id="tdViewAdd" colspan="2" style="text-align: left">
            <input type="button" class="btn btn-primary" value="进度条" onclick="jinDuTiao()" />
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <!-- table表格控件 -->
            <table id="listTable"></table>
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <!-- tree树控件 -->
            <ul id="treeOverlays" class="ztree"></ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="/js/common.js"></script>
  <script src="./map.js"></script>
  <script type="text/javascript">
    "use script" //开发环境建议开启严格模式

    let $table

    function initUI() {
      // 树控件
      mars2d.Util.fetchJson({ url: "../config/config.json" })
        .then(function (data) {
          initTree(data.mars2d.operationallayers)
        })
        .catch(function (error) {
          console.log("加载JSON出错", error)
        })

      // eslint-disable-next-line no-undef
      jeDate("#txtStartTime", {
        theme: {
          bgcolor: "#135b91",
          pnColor: "#00CCFF"
        },
        format: "YYYY-MM-DD hh:mm:ss",
        zIndex: 20210825
      })
      $("#txtStartTime").val(new Date().format("yyyy-MM-dd HH:mm:ss"))

      //获取台风列表
      mars2d.Util.fetchJson({
        url: "//data.mars2d.cn/file/apidemo/typhoon/list_2020.json"
      })
        .then(function (res) {
          const arr = typhoon_jsons_list_default(res)
          //启动正在发送的台风
          arr.forEach((item) => {
            if (item.state == "start") {
              item.show = true
              selectOneTyphoon(item)
            }
          })
          showTyphoonTable(arr)
        })
        .catch(function (error) {
          console.log("加载JSON出错", error)
        })

      $("#slider_lodLevel")
        .slider({
          id: "slider-lodLevel-internal",
          ticks: [0, 5, 10, 15, 18, 21],
          ticks_positions: [0, 20, 40, 60, 80, 100],
          ticks_labels: ["0", "5", "10", "15", "18", "21"],
          range: true,
          value: [0, 21]
        })
        .on("slide", function () {
          let lodLevel = $("#slider_lodLevel").slider("getValue")
          $("#slider_showLevel").slider("setValue", lodLevel)
        })

      $("#slider_showLevel")
        .slider({
          id: "slider-showLevel-internal",
          ticks: [-25, 2, 4, 6, 8, 9],
          ticks_positions: [0, 20, 40, 60, 80, 100],
          ticks_labels: ["0", "20", "40", "60", "80", "100"],
          range: true,
          value: [-25, 9]
        })
        .on("change", function () {
          updateBrightness(Number($("#slider_showLevel").val()[0] / 50))
        })

      // 调整亮度 （演示滑动条）
      $("#slider_brightness")
        .slider()
        .on("change", function () {
          updateBrightness(Number($("#slider_brightness").val()))
        })

      $("#slider_opacity")
        .slider()
        .on("change", function () {
          // console.log(e);
        })

      $("#txtColor").minicolors({
        position: "bottom right",
        control: "saturation",
        change: function (color, opacity) {
          console.log(color)
        }
      })

      $("#txtCrs").change(function () {
        const txtCrs = $("#txtCrs").val()
        toastr.info(txtCrs)
      })
    }

    function fireStar() {
      if ($("#showGoHome").is(":checked")) {
        toastr.info("火星被选中了")
      }
    }

    function earthStar() {
      if ($("#showSceneModePicker").is(":checked")) {
        toastr.info("地球被选中了")
      }
    }

    function sunStar() {
      if ($("#showBaseLayerPicker").is(":checked")) {
        toastr.info("太阳被选中了")
      }
    }

    function chooseStar() {
      if ($("#shadingMaterials1").is(":checked")) {
        toastr.info("火星被选中了")
      } else if ($("#shadingMaterials2").is(":checked")) {
        toastr.info("地球被选中了")
      } else if ($("#shadingMaterials3").is(":checked")) {
        toastr.info("太阳被选中了")
      }
    }

    function messageOut() {
      globalMsg("展示Message信息")
    }
    function Alert() {
      globalAlert("我是Alert提示信息内容", "提示Alert标题")
    }
    function Warning() {
      globalNotify("提示Notify标题", "我是Notify提示信息内容")
    }

    function jinDuTiao() {
      haoutil.loading.show()
      setTimeout(function () {
        haoutil.loading.close()
      }, 1000)
    }

    // 瓦片数据的矩形区域范围
    function onDrawExtent() {
      drawExtent()
    }
    eventTarget.on("drawExtent", function (event) {
      $("#txtRectangle").val(event.extent)
    })

    //清除图层限定范围
    // function onClearExtent() {
    //   $("#txtRectangle").val("")
    //   map.graphicLayer.clear()
    // }

    //显示台风列表
    function showTyphoonTable(data) {
      $("#listTable").bootstrapTable({
        data: data,
        height: 300,
        pagination: false,
        singleSelect: false,
        checkboxHeader: false,
        columns: [
          {
            title: "是否显示",
            field: "show",
            align: "center",
            checkbox: true,
            with: 50
          },
          {
            title: "台风编号",
            field: "typnumber",
            align: "center"
          },
          {
            title: "台风名（中文）",
            field: "name_cn",
            align: "center"
          },
          {
            title: "台风名（英文）",
            field: "name_en",
            align: "center"
          }
        ],
        onCheck: function (row) {
          selectOneTyphoon(row)
        },
        onUncheck: function (row) {
          unSelectOneTyphoon(row)
        },
        onClickRow: function (row) {
          if (typhoonListObj[row.id] && typhoonListObj[row.id].show) {
            selectOneTyphoon(row)
          }
        }
      })
    }

    let typhoonListObj = {}

    //取消勾选台风
    function unSelectOneTyphoon(row) {
      let typhoon = typhoonListObj[row.id]
      if (typhoon == selectTF) {
        $("#typhoonPath").hide()
      }
    }

    //勾选了台风
    function selectOneTyphoon(row) {
      $("#lblName").html("[" + row.typnumber + "]" + "" + row.name_cn)
      toastr.info(row.name_cn + "台风要来啦，大家要注意安全！")
    }

    let selectTF

    function getHeight() {
      return $(window).height() - 440
    }

    function typhoon_jsons_list_default(data) {
      let arr = []
      data.typhoonList.forEach((item) => {
        arr.push({
          id: item[0],
          name_en: item[1],
          name_cn: item[2],
          typnumber: item[3],
          state: item[7]
        })
      })
      return arr
    }

    //转换数据,将后端接口数据转换为需要的格式
    function conversionPathData(oldData) {
      let path = []
      oldData[8].forEach((message) => {
        let circle7
        let circle10
        let circle12
        message[10].forEach((level) => {
          let radiusObj = {
            speed: level[0],
            radius1: level[1],
            radius2: level[2],
            radius3: level[3],
            radius4: level[4]
          }

          if (level[0] == "30KTS") {
            circle7 = radiusObj
          } else if (level[0] == "50KTS") {
            circle10 = radiusObj
          } else if (level[0] == "64KTS") {
            circle12 = radiusObj
          } else {
            console.log("未处理风圈", radiusObj)
          }
        })
      })
    }

    //===========================树控件处理============================
    let layers = []
    let layersObj = {}

    function initTree(layers) {
      //初始化树
      let setting = {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          onCheck: treeOverlays_onCheck,
          onDblClick: treeOverlays_onDblClick
        }
      }

      let zNodes = []
      for (let i = layers.length - 1; i >= 0; i--) {
        let layerOptions = layers[i]
        layerOptions.flyTo = true
        let layer = mars2d.LayerUtil.create(layerOptions) //创建图层

        let node = _getNodeConfig(layer)
        if (node) {
          zNodes.push(node)
        }
      }
      $.fn.zTree.init($("#treeOverlays"), setting, zNodes)
    }

    function _getNodeConfig(layer) {
      if (layer == null || layer.options.isPrivate) {
        return
      }

      let item = layer.options

      if (item.name == "未命名") {
        return
      }

      let node = {
        id: layer.id,
        pId: layer.pid,
        name: layer.name
      }

      if (layer.hasEmptyGroup) {
        //空数组
        node.icon = "/lib/jquery/ztree/css/mars/images/folder.png"
        node.open = item.open == null ? true : item.open
        layersObj[node.id] = layer
      } else if (layer.hasChildLayer) {
        //有子节点的数组
        node.icon = "/lib/jquery/ztree/css/mars/images/layerGroup.png"
        node.open = item.open == null ? true : item.open
        layersObj[node.id] = layer
      } else {
        node.icon = "/lib/jquery/ztree/css/mars/images/layer.png"
        node.checked = layer.isAdded && layer.show

        if (layer.parent) {
          node._parentId = layer.parent.id
        }

        //记录图层
        layersObj[node.id] = layer
      }
      return node
    }

    function treeOverlays_onCheck(e, treeId, chktreeNode) {
      let treeObj = $.fn.zTree.getZTreeObj(treeId)
      //获得所有改变check状态的节点
      let changedNodes = treeObj.getChangeCheckedNodes()

      haoutil.array.remove(changedNodes, chktreeNode)
      changedNodes.push(chktreeNode)

      for (let i = changedNodes.length - 1; i >= 0; i--) {
        let treeNode = changedNodes[i]
        treeNode.checkedOld = treeNode.checked

        if (treeNode.check_Child_State == 1) {
          // 0:无子节点被勾选,  1:部分子节点被勾选,  2:全部子节点被勾选, -1:不存在子节点 或 子节点全部设置为 nocheck = true
          continue
        }

        let layer = layersObj[treeNode.id]
        if (layer == null) {
          continue
        }

        //显示隐藏透明度设置view
        if (treeNode.checked) {
          $("#" + treeNode.tId + "_range").show()
        } else {
          $("#" + treeNode.tId + "_range").hide()
        }

        updateLayerShow(layer, treeNode.checked)
      }
    }

    //更新图层:显示隐藏状态
    function updateLayerShow(layer, show) {
      layer.show = show

      if (show) {
        if (!layer.isAdded) {
          map.addLayer(layer)
        }
        // layer.flyTo();
      } else {
        if (layer.isAdded) {
          map.removeLayer(layer)
        }
      }
    }

    function treeOverlays_onDblClick(event, treeId, treeNode) {
      if (treeNode == null || treeNode.id == null) {
        return
      }
      let layer = layersObj[treeNode.id]
      if (layer == null || !layer.layer) {
        haoutil.msg("图层尚未加载，需要加载后才能定位！")
        return
      }

      layer.flyTo()
    }
  </script>
</body>

</html>
